<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <title></title>
     <style>
        * {
          padding: 0;
          margin: 0;
        }
        body {
          background-color: rgb(0, 102, 102);
        }
        ul {
          border: 2px solid red;
          width: 726px;
          /*去掉ul中小圆点*/
          list-style-type: none;
          /*上下20px，auto实现左右自动居中*/
          margin: 20px auto;
        }
        img {
          width: 200px;
          height: 200px;
        }
        li {
          position: relative;
          float: left;
          border: 1px solid red;
          padding: 10px;
          margin: 10px;
          background-color: rgb(204, 204, 204);
        }
        p {
          position: absolute;
          bottom: 40px;
          /*文字水平居中*/
          text-align: center;
        }
        .clearFloat {
          clear: both;
        }
        li:hover {
        	position: relative;
        	top: -2px;
        	left: 2px;
        }
        .jumpTop {
        	width: 80px;
        	height: 25px;
        	border: 1px solid red;
        	text-align: center;
        	line-height: 25px;
        	position: fixed;
        	bottom: 20px;
        	right: 20px;
        }
     </style>
   </head>
   <body>
     <ul>
        <li>
          <img src="img/01.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/02.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/03.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/04.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/05.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/06.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/06.jpg"/>
          <p>Java学习教程</p>
        </li>
        <li>
          <img src="img/06.jpg"/>
          <p>Java学习教程</p>
        </li>
        <div class="clearFloat"></div>
     </ul>
     <div class="jumpTop">
     	<a href="#">顶部</a>
     </div>
   </body>
</html>
